<script setup lang="ts">
import InfoBanner from "./components/InfoBanner.vue";
import InfoUsage from "./components/InfoUsage.vue";
import InfoCard from "./components/InfoCard.vue";
import GlobalHeader from "../../components/GlobalHeader.vue";

const cards = [
  {
    title: "真实的高频面试题",
    description: "SageCode 的题库基于国内外各大公司的真实高频面试题，由资深面试官和工程师团队精心编写和维护。",
    imageUrl: "https://www.nootcode.com/feature-question-cn-light.png",
    mode: 'image-right'
  },
  {
    title: "智能评分反馈",
    description: "SageCode 的评分系统基于最新的 AI 模型，结合计算机科学专业知识以及各大公司真实面试中关注的重点考察领域进行了专门优化，能够对用户提供的多种不同输入如文本、代码、架构图等进行智能评分，并提供详细的反馈和改进建议。",
    imageUrl: "https://www.nootcode.com/feature-rating-cn-light.png",
    mode: 'image-left'
  },
  {
    title: "随时随地刷题",
    description: "SageCode 使用响应式设计，支持在移动设备上使用，用户可以在任何地方使用 SageCode 尽情刷题。",
    imageUrl: "https://www.nootcode.com/feature-mobile.jpg",
    mode: 'image-right'
  }
] as const;
</script>

<template>
  <el-container>
    <el-header>
      <GlobalHeader/>
    </el-header>
    <el-main>
      <div class="info-page">
        <InfoBanner/>
        <InfoUsage/>
        <InfoCard
            v-for="card in cards"
            :key="card.title"
            :title="card.title"
            :description="card.description"
            :image-url="card.imageUrl"
            :mode="card.mode"
        />
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
.cards-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 20px;
}

.info-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>
